<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="./3.4/select2-bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="./3.4/select2.css" />
		<script src="../../js/jquery/jquery-1.8.3.js"></script>
		<script src="3.4/select2.js"></script>
		<title></title>

	</head>
	<body>
		<div>
			<p>select2的标签</p>
			<span>select2</span>
			<p id="e14" class="js-example-basic-single"></span>
				<br />
				<br />
				<br />
				<br />
		</div>
		<input type="button" value="destory" onclick="destroy();" />
		<input type="button" value="init" onclick="init();" />
		<input type="button" value="enable" onclick="enable();" />
		<input type="button" value="disable" onclick="disable();" />
		<input type="button" value="readonly" onclick="readonly();" />
		<input type="button" value="writable" onclick="writable();" />
		<input type="button" value="getValue" onclick="getValue();" />
		<input type="button" value="clear" onclick="clearSelect2();" />
	</body>
	<script>
		//select tag 部分
		let preload_data2 = [{
			id: 'user0',
			text: 'Disabled User',
			locked: true
		}, {
			id: 'user1',
			text: 'Jane Doe'
		}, {
			id: 'user2',
			text: 'John Doe',
			locked: true
		}, {
			id: 'user3',
			text: 'Robert Paulson',
			locked: true
		}, {
			id: 'user5',
			text: 'Spongebob Squarepants'
		}, {
			id: 'user6',
			text: 'Planet Bob'
		}, {
			id: 'user7',
			text: 'Inigo Montoya'
		}, {
			id: 'user8',
			text: 'u8'
		}, {
			id: 'user9',
			text: 'u9'
		}];

		let preload_data1 = [{
			id: 'user0',
			text: 'Disabled User',
			locked: true
		}];

		function init() {
			$("#e14").select2({
				width: "300px",
				multiple: true,
				allowClear: true,
				
				query: function(query) {
					var data = {
						results: []
					};
					$.each(this.tag, function() {
						if (query.term.length == 0 || this.text.toUpperCase().indexOf(query.term
								.toUpperCase()) >= 0) {
							data.results.push({
								id: this.id,
								text: this.text
							});
						}
					});
					query.callback(data);
				},
				tag: preload_data2
			});
			$('#e14').select2('data', preload_data1);
		}

		function destroy() {
			$("#e14").select2("destroy");
		}

		function enable() {
			$("#e14").select2("enable", true);
		}

		function disable() {
			$("#e14").select2("enable", false);
		}

		function readonly() {
			$("#e14").select2("readonly", true);
		}

		function writable() {
			$("#e14").select2("readonly", false);
		}

		function getValue() {
			alert($("#e14").val());
			let values = $("#e14").select2('data');
			alert(JSON.stringify(values));
		}
		
		function clearSelect2() {
			$("#e14").select2('data', []);
		}

		$(document).ready(function() {
			console.log("开始...");
			init();
		});
	</script>
</html>
